<template>
  <div v-permission="['channel:app', 'channel:modify']">
    <vxe-grid
      ref="grid"
      resizable
      show-overflow
      highlight-hover-row
      keep-source
      row-id="id"
      :tree-config="{}"
      :export-config="{}"
      :pager-config="undefined"
      :data="tableData"
      :columns="tableColumn"
      :toolbar-config="toolBarConfig"
      :loading="loading"
    >
      <template v-slot:paramName_default="{ row }">
        <a-input v-model="row.paramName" />
      </template>

      <template v-slot:paramKey_default="{ row }">
        <a-input v-model="row.paramKey" />
      </template>

      <template v-slot:isRequired_default="{ row }">
        <a-switch v-model="row.isRequired" checked-children="是" un-checked-children="否" />
      </template>

      <template v-slot:toolbar_buttons>
        <a-space>
          <a-button type="primary" icon="plus" @click="addRow">新增</a-button>
          <a-button type="danger" icon="delete" @click="deleteRow">删除</a-button>
        </a-space>
      </template>
    </vxe-grid>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      loading: false,
      tableData: [],
      toolBarConfig: {
        slots: {
          buttons: 'toolbar_buttons'
        },
        // 缩放
        zoom: false,
        // 自定义表头
        custom: false,
        // 右侧是否显示刷新按钮
        refresh: false
      },
      tableColumn: [
        { type: 'checkbox', width: 40 },
        { field: 'paramName', title: '参数名', minWidth: 80, slots: { default: 'paramName_default' }},
        { field: 'paramKey', title: '参数键名', minWidth: 80, slots: { default: 'paramKey_default' }},
        { field: 'isRequired', title: '是否必填', width: 80, slots: { default: 'isRequired_default' }}
      ]
    }
  },
  created() {
  },
  methods: {
    setTableData(tableData) {
      this.tableData = tableData
    },
    getTableData() {
      return this.tableData
    },
    addRow() {
      this.tableData.push(this.emptyRow())
    },
    emptyRow() {
      return {
        id: this.$utils.uuid(),
        paramName: '',
        paramKey: '',
        isRequired: false
      }
    },
    deleteRow() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择需要删除的数据！')
        return
      }

      const ids = records.map(item => item.id)
      this.tableData = this.tableData.filter(item => !ids.includes(item.id))
    },
    validData() {
      for (let i = 0; i < this.tableData.length; i++) {
        const data = this.tableData[i]
        if (this.$utils.isEmpty(data.paramName)) {
          this.$msg.error('参数名不能为空！')
          return false
        }
        if (this.$utils.isEmpty(data.paramKey)) {
          this.$msg.error('参数键名不能为空！')
          return false
        }
      }

      return true
    }
  }
}
</script>

<style scoped>

</style>
